<template>
  <div id="index-box">
    <!-- 火车票查询 -->
    <el-container>
      <el-header>
        <i class="el-icon-bell"></i>
        <span class="infos">今天是 01月05日 星期日 电话及网络可预订02月03日车票，可预约预订03月04日车票</span>
        <el-link type="primary"
                 class="order-train"><i class="el-icon-s-order"></i>火车票订单 ></el-link>
      </el-header>
      <!-- 车票查询 -->
      <el-container>
        <el-aside width="500px">
          <div class="smt">
            <h3> <i class="icon-train"></i>火车票查询</h3>
          </div>
          <br>
          <!-- 火车票查询 -->
          <!-- 换 -->
          <span class="line-zs "></span>
          <svg class="icon-huan"
               aria-hidden="true">
            <use xlink:href="#icon-huan"></use>
          </svg>

          <el-form :model="Trainform"
                   :rules="rules"
                   ref="Trainform"
                   label-width="110px">
            <!-- 出发城市 -->
            <el-form-item label="出发城市"
                          prop="formStation">
              <el-input v-model="Trainform.formStation"
                        placeholder="城市名/车站名"
                        style="width:280px"
                        clearable></el-input>
            </el-form-item>

            <!-- 到达城市 -->
            <el-form-item label="到达城市"
                          prop="toStation">
              <el-input v-model="Trainform.toStation"
                        placeholder="城市名/车站名"
                        style="width:280px"
                        clearable></el-input>
            </el-form-item>
            <!-- 出发日期 -->
            <el-form-item label="出发日期"
                          prop="formDate">
              <el-date-picker style="width:280px"
                              v-model="Trainform.formDate"
                              align="right"
                              type="date"
                              placeholder="选择出发日期"
                              :picker-options="pickerOptions">

              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-checkbox-group v-model="Trainform.checked">
                <el-checkbox>仅搜高铁和动车</el-checkbox>
                <el-button type="primary"
                           @click="submitForm('Trainform')">立即搜索</el-button>
              </el-checkbox-group>
            </el-form-item>

          </el-form>

        </el-aside>
        <!-- 广告图片轮播 -->
        <el-main>

          <el-carousel height="350px">
            <el-carousel-item v-for="Ad in imagesbox"
                              :key="Ad.id">
              <!-- <h3 class="small">{{ Ad }}</h3> -->
              <img :src="Ad.idView"
                   class="image">
            </el-carousel-item>
          </el-carousel>

        </el-main>
      </el-container>
    </el-container>
    <!-- 热门推荐 -->
    <el-container>
      <el-header>
        <!-- <svg class="icon-remen" aria-hidden="true">
  <use xlink:href="#icon-remen"></use>
</svg> -->
        <div class="rmtj"><span class="iconfont icon-remen"></span>热门推荐</div>
      </el-header>
      <el-main>
        <el-tabs v-model="hotRoute"
                 @tab-click="hotRouteClick">
          <el-tab-pane v-for="cityTab in cityRouteTabs"
                       :label="cityTab.city"
                       :key="cityTab.name"
                       :name="cityTab.name">
            <ul class="hot-stations">
              <li v-for="city in cityRoute">
                <el-link href="#"
                         @click=" @click="
                         openFullScreen"">
                  <div class="station-name">
                    <span>{{city.formCity}}</span>
                    <i class="iconfont icon-ttk_index_pointerx1"></i>
                    <span>{{city.toCity}}</span>
                  </div>
                  <p class="station-price">
                    <span>￥</span>
                    <span class="price-num">{{city.routePrice}}</span>
                    <span>元</span>
                  </p>
                </el-link>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>

      </el-main>
    </el-container>
    <!-- 常见问题 -->
    <el-container>
      <el-header>
        <div class="cjwt"><span class="iconfont icon-changjianwenti"></span>常见问题</div>
      </el-header>
      <el-main>
        <!--常见问题-->
        <div class="issue-content">
          <ul>
            <li class="single-issue"
                v-for="problem in issueContent">
              <h5 class="issue-title">{{problem.title}}</h5>
              <div class="issue-detail">{{problem.detail}}</div>
              <a target="_blank"
                 href="#"
                 class="more-issue">{{problem.more}}</a>
            </li>
          </ul>
        </div>

      </el-main>
    </el-container>
  </div>

</template>

<script>

export default {
  name: 'index',
  components: {},
  data () {
    return {
      //点击线路城市加载
      fullscreenLoading: false,
      //广告轮播图片
      imagesbox: [
        { id: 0, idView: require("../../assets/images/img1.jpg") },
        { id: 1, idView: require("../../assets/images/img2.jpg") },
        { id: 2, idView: require("../../assets/images/img1.jpg") },
        { id: 3, idView: require("../../assets/images/img2.jpg") }
      ],
      //常见问题
      issueContent: [
        {
          title: '身份验证',
          detail: '2014年新规：从未在网络购票的用户，请先携身份证去火车站专门窗口核验身份证信息，核验通过后才能网上购票',
          more: '更多>>'
        },
        {
          title: '取票方式',
          detail: '若您使用二代居民身份证进行的预订，可凭预订时所使用的乘车人有效身份证件原件到车站售票窗口、铁路客票代售点或车站自动售票机上办理换票.....',
          more: '更多>>'
        },
        {
          title: '如何退票',
          detail: '预订火车票成功后，如未取票且离产品内显示的火车发车时间大于1小时30分钟，您可在线申请退票。预订成功后，如已取票或离 产品内显示的火车......',
          more: '更多>>'
        },
        {
          title: '如何改签',
          detail: '预订成功后，如需办理订单内的车票改签，可凭购票证件原件到车站窗口办理或登录京东原预订账户，在订单详情中申请在线改签，在线改签服务时......',
          more: '更多>>'
        }
      ],
      // 点击选择tabs城市数据
      cityRoutes: [
        { formCity: '北京', toCity: '南宁', routePrice: 268.5 },
        { formCity: '北京', toCity: '广州', routePrice: 251.0 },
        { formCity: '北京', toCity: '厦门', routePrice: 243.0 },
        { formCity: '北京', toCity: '上海', routePrice: 156.5 },
        { formCity: '北京', toCity: '杭州', routePrice: 189.5 },
        { formCity: '北京', toCity: '武汉', routePrice: 152.5 },
        { formCity: '北京', toCity: '长沙', routePrice: 189.5 },
        { formCity: '北京', toCity: '合肥', routePrice: 138.5 },
        { formCity: '北京', toCity: '东莞', routePrice: 251.0 },
        { formCity: '北京', toCity: '深圳', routePrice: 254.5 },
        { formCity: '北京', toCity: '昆明', routePrice: 302.5 },
        { formCity: '北京', toCity: '南京', routePrice: 130.5 },

        { formCity: '上海', toCity: '天津', routePrice: 143.5 },
        { formCity: '上海', toCity: '深圳', routePrice: 234.0 },
        { formCity: '上海', toCity: '东莞', routePrice: 217.0 },
        { formCity: '上海', toCity: '苏州', routePrice: 12.5 },
        { formCity: '上海', toCity: '贵阳', routePrice: 229.0 },
        { formCity: '上海', toCity: '厦门', routePrice: 163.5 },
        { formCity: '上海', toCity: '福州', routePrice: 128.5 },
        { formCity: '上海', toCity: '广州', routePrice: 189.5 },
        { formCity: '上海', toCity: '合肥', routePrice: 78.0 },
        { formCity: '上海', toCity: '重庆', routePrice: 224.0 },
        { formCity: '上海', toCity: '武汉', routePrice: 135.5 },
        { formCity: '上海', toCity: '南宁', routePrice: 224.5 },

        { formCity: '广州', toCity: '济南', routePrice: 224.0 },
        { formCity: '广州', toCity: '厦门', routePrice: 102.0 },
        { formCity: '广州', toCity: '南京', routePrice: 206.0 },
        { formCity: '广州', toCity: '长沙', routePrice: 98.0 },
        { formCity: '广州', toCity: '昆明', routePrice: 229.0 },
        { formCity: '广州', toCity: '合肥', routePrice: 192.0 },
        { formCity: '广州', toCity: '福州', routePrice: 345.0 },
        { formCity: '广州', toCity: '苏州', routePrice: 213.0 },
        { formCity: '广州', toCity: '西安', routePrice: 224.0 },
        { formCity: '广州', toCity: '太原', routePrice: 268.5 },
        { formCity: '广州', toCity: '天津', routePrice: 251.0 },
        { formCity: '广州', toCity: '杭州', routePrice: 173.5 },

        { formCity: '深圳', toCity: '济南', routePrice: 229.0 },
        { formCity: '深圳', toCity: '苏州', routePrice: 260.0 },
        { formCity: '深圳', toCity: '上海', routePrice: 234.0 },
        { formCity: '深圳', toCity: '郑州', routePrice: 201.0 },
        { formCity: '深圳', toCity: '天津', routePrice: 254.5 },
        { formCity: '深圳', toCity: '杭州', routePrice: 219.5 },
        { formCity: '深圳', toCity: '福州', routePrice: 383.0 },
        { formCity: '深圳', toCity: '西安', routePrice: 236.0 },
        { formCity: '深圳', toCity: '昆明', routePrice: 206.0 },
        { formCity: '深圳', toCity: '南京', routePrice: 234.5 },
        { formCity: '深圳', toCity: '南宁', routePrice: 124.0 },
        { formCity: '深圳', toCity: '广州', routePrice: 21.5 },

        { formCity: '成都', toCity: '济南', routePrice: 251.0 },
        { formCity: '成都', toCity: '上海', routePrice: 259.0 },
        { formCity: '成都', toCity: '合肥', routePrice: 208.0 },
        { formCity: '成都', toCity: '厦门', routePrice: 1045.0 },
        { formCity: '成都', toCity: '昆明', routePrice: 481.5 },
        { formCity: '成都', toCity: '南宁', routePrice: 180.5 },
        { formCity: '成都', toCity: '福州', routePrice: 254.5 },
        { formCity: '成都', toCity: '杭州', routePrice: 236.5 },
        { formCity: '成都', toCity: '广州', routePrice: 206.0 },
        { formCity: '成都', toCity: '苏州', routePrice: 252.0 },
        { formCity: '成都', toCity: '深圳', routePrice: 251.0 },
        { formCity: '成都', toCity: '郑州', routePrice: 168.5 }
      ],
      //城市旅游线路---默认显示
      cityRoute: [
        { formCity: '北京', toCity: '南宁', routePrice: 268.5 },
        { formCity: '北京', toCity: '广州', routePrice: 251.0 },
        { formCity: '北京', toCity: '厦门', routePrice: 243.0 },
        { formCity: '北京', toCity: '上海', routePrice: 156.5 },
        { formCity: '北京', toCity: '杭州', routePrice: 189.5 },
        { formCity: '北京', toCity: '武汉', routePrice: 152.5 },
        { formCity: '北京', toCity: '长沙', routePrice: 189.5 },
        { formCity: '北京', toCity: '合肥', routePrice: 138.5 },
        { formCity: '北京', toCity: '东莞', routePrice: 251.0 },
        { formCity: '北京', toCity: '深圳', routePrice: 254.5 },
        { formCity: '北京', toCity: '昆明', routePrice: 302.5 },
        { formCity: '北京', toCity: '南京', routePrice: 130.5 }

      ],
      // 热门推荐城市tab选择
      cityRouteTabs: [
        { city: '北京', name: 'beijing' },
        { city: '上海', name: 'shanghai' },
        { city: '广州', name: 'guangzhou' },
        { city: '深圳', name: 'shengzheng' },
        { city: '成都', name: 'chengdu' }
      ],
      // 出发日期事件
      pickerOptions: {

        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //火车票查询 表单
      Trainform: {
        formStation: '',
        toStation: '',
        formDate: '',
        checked: false
      },
      // 热门线路
      hotRoute: 'beijing',
      // 验证
      rules: {
        formStation: [
          { required: true, message: '请输入出发城市', trigger: 'blur' },

        ],
        toStation: [
          { required: true, message: '请输入到达城市', trigger: 'blur' }
        ],
        formDate: [
          { type: 'date', required: true, message: '请选择出发日期', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm (Trainform) {
      this.$refs[Trainform].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    hotRouteClick (tab, event) {
      console.log(tab, event);
      // 获取路线
      let citys = this.cityRoutes
      console.log(citys)
      // 过滤选择路线
      let Filtercitys = citys.filter((item) => {
        console.log(tab.label)
        return item.formCity == tab.label;

      })
      this.cityRoute = Filtercitys
      console.log(Filtercitys)

    },
    openFullScreen () {

    }
  }
}
</script>

<style scoped >
#index-box {
  width: 1500px;
  margin: 0 auto;
  background-color: #e9eef3;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  background-color: #fff;
  color: #333;
  width: 480px;
  height: 350px;
  margin-top: 20px;
  margin-left: 10px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;

  line-height: 80px;
}
.infos {
  width: 560px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: white;
  font-size: 18px;
}
/*时间*/
.icon-note {
  width: 9px;
  height: 14px;
  display: inline-block;
  vertical-align: text-top;
  background: url;
  margin-top: 3px;
  margin-right: 8px;
  margin-left: 3px;
}
/*火车票订单*/
.order-train {
  /* color: #005ea7; */
  position: relative;
  float: right;
}
/* 广告图片轮播 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.image {
  width: 100%;
  height: 350px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
/* .train_choose{
  width: 480px;
  height: 350px;
  margin-top: 20px;
  margin-left: 10px;
  border:1px solid gray;
  background-color: #d3dce6
} */
/* 火车图标 */
.smt {
  border-bottom: 1px solid #e7e7e7;
}
.icon-train {
  display: inline-block;
  width: 32px;
  height: 20px;
  background: url("/static/images/train-logo.png");
  vertical-align: middle;
  margin-right: 9px;
  margin-left: 20px;
}
/* 换icon */
.el-aside .line-zs {
  position: relative;
  top: 32px;
  width: 30px;
  height: 40px;
  border: 1px solid #e7e7e7;
  border-left: 0;
  right: 80px;
  float: right;
}
.icon-huan {
  width: 40px;
  height: 40px;
  position: relative;
  float: right;
  right: 10px;
  top: 30px;
}
/* 搜索按钮 */
.el-button {
  margin-left: 46px;
}

/* 热门推荐icon,常见问题 */
.rmtj,
.cjwt {
  font-size: 30px;
}
.rmtj .icon-remen,
.cjwt .icon-changjianwenti {
  width: 60px;
  height: 60px;
  color: red;
  font-size: 30px;
}
/* 热门推荐线路 */
.el-tabs {
  margin-top: -20px;
}
.hot-stations {
  margin-left: 45px;
}
.hot-stations li {
  width: 167px;
  height: 77px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 4px;
  float: left;
  margin: 10px 10px 10px 30px;
  cursor: pointer;
  text-align: center;
  list-style: none;
}
.hot-stations li:hover {
  border: 1px solid #2ebdff;
}
/*站台名称*/
.hot-stations li .station-name {
  font-size: 14px;
  color: #222;
  line-height: 20px;
  margin: 10px 0 9px;
}
/*箭头*/
.hot-stations li .station-name .icon-ttk_index_pointerx1 {
  font-size: 27px;
  color: #d8d8d8;
  margin: 0 8px;
  vertical-align: sub;
  display: inline-block;
}
.icon-ttk_index_pointerx1:before {
  content: "—";
  box-sizing: border-box;
  margin: 0;
  box-sizing: inherit;
}
.iconfont {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*线路价钱*/
.hot-stations li .station-price {
  line-height: 25px;
  color: #f90;
  font-size: 12px;
  font-weight: 700;
}
/*常见问题内容部分*/
.issue-content {
  margin-top: 20px;
  overflow: hidden;
}
.issue-content ul {
  zoom: 1;
  margin-left: 5px;
}
.issue-content .single-issue {
  float: left;
  display: inline;
  width: 320px;
  height: 200px;
  background: #f0f8ff;
  border: 1px dashed #2ebdff;
  position: relative;
  zoom: 1;
  margin-left: 14px;
  line-height: 25px;
}
/*标题*/
.issue-content .single-issue .issue-title {
  font-size: 18px;
  color: #52555b;
  font-weight: 400;
  margin: 15px 0 0 25px;
}
/*详情*/
.issue-content .single-issue .issue-detail {
  color: #84898d;
  width: 238px;
  height: 50px;
  margin: 15px auto;
  font-size: 13px;
}
/*更多*/
.issue-content .single-issue .more-issue {
  position: absolute;
  font-size: 12px;
  color: #8b867e;
  bottom: 10px;
  right: 25px;
}
</style>
